<route lang="json5">
{
  style: {
    navigationBarTitleText: '活动上传',
  },
}
</route>

<template>
  <view class="activity-upload common-container">
    <view class="activity-info">
      <view class="activity-info-title">{{ detail.name }}</view>
      <view class="activity-info-item">
        活动类型：{{ detail.type_dictText }}
      </view>
      <view class="activity-info-item">
        活动礼堂：{{ detail.hallId_dictText }}
      </view>
      <view class="activity-info-item">活动时间：{{ detail.date }}</view>
    </view>
    <wd-form
      custom-class="common-form"
      ref="formRef"
      :model="formModel"
    >
      <wd-cell-group>
        <wd-input
          label="活动地点"
          label-width="80px"
          prop="name"
          v-model="formModel.address"
          placeholder="请输入"
        />
        <wd-input
          type="number"
          label="活动时长(小时)"
          label-width="100px"
          prop="actualDuration"
          v-model="formModel.actualDuration"
          placeholder="请输入"
        />
        <wd-input
          type="digit"
          label="参与人数"
          label-width="80px"
          prop="actualPayerNumber"
          v-model="formModel.actualPayerNumber"
          placeholder="请输入"
        />
        <wd-cell
          label="相关照片"
          label-width="80px"
        >
          <wd-upload
            :file-list="fileState.fileList"
            multiple
            :action="uploadUrl"
            image-mode="aspectFill"
            @change="changeUpload"
          ></wd-upload>
        </wd-cell>
      </wd-cell-group>
    </wd-form>
    <wd-button
      type="primary"
      @click="submitForm"
      :round="false"
      block
    >
      立即上传
    </wd-button>
  </view>
</template>

<script setup>
import ActivityApi from '@/service/activity'
import { uploadUrl } from '@/service/common'
import { prevPageNeedRefresh } from '@/utils'

/** 上传 start */
const fileState = reactive({
  fileList: [],
})

const changeUpload = ({ fileList }) => {
  fileState.fileList = fileList
  console.log('fileState.fileList', fileState.fileList)
}
/** 上传 end */

const formRef = ref()
const formModel = ref({
  address: '',
  actualDuration: '',
  actualPayerNumber: '',
})
const formKeyMap = {
  address: '活动地点',
  actualDuration: '活动时长',
  actualPayerNumber: '参与人数',
}

const detail = ref({
  name: '',
  type_dictText: '',
  address: '',
  hallId_dictText: '',
})
const getDetail = async (id) => {
  const { code, result } = await ActivityApi.getActivityDetail(id)
  if (code === 200 && result) {
    detail.value = { ...result }
  }
}

const submitForm = () => {
  let objKey = ''
  for (const key in formKeyMap) {
    if (!formModel.value[key]) {
      objKey = key
      break
    }
  }
  if (objKey) {
    uni.showToast({
      title: `${formKeyMap[objKey]}不能为空`,
      icon: 'none',
    })
    return false
  }

  formRef.value
    .validate()
    .then(async () => {
      let liveUrl = ''
      if (fileState.fileList.length > 0) {
        console.log('fileState.fileList', fileState.fileList)
        const urlArr = fileState.fileList.map((item) => {
          console.log('item.response', item.response)
          console.log('s', JSON.parse(item.response))
          const res = JSON.parse(item.response)
          return res?.message
        })
        console.log('urlArr', urlArr)
        liveUrl = urlArr.join(',')
      }
      const params = {
        ...formModel.value,
        id: id.value,
        liveUrl,
      }
      const { code, result, message } = await ActivityApi.uploadActivity(params)
      if (code === 200 && result) {
        uni.showToast({
          icon: 'success',
          title: '上传成功',
        })
        setTimeout(() => {
          isNavigateBack.value = true
          uni.navigateBack()
        }, 1000)
      } else {
        uni.showToast({
          icon: 'error',
          title: message,
        })
      }
    })
    .catch((error) => {
      console.error(error)
    })
}

const id = ref('')
onLoad((options) => {
  if (options.id) {
    id.value = options.id
    getDetail(options.id)
  }
})

const isNavigateBack = ref(false)
onUnload(() => {
  prevPageNeedRefresh(isNavigateBack.value)
})
</script>

<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<style lang="scss">
@import '../../../style/common-form';
</style>

<style lang="scss" scoped>
.activity-info {
  margin-bottom: $uni-spacing-col-lg;

  &-title {
    margin-bottom: $uni-spacing-col-lg;
    font-size: $uni-font-size-lg;
    font-weight: 600;
  }

  &-item {
    margin-bottom: $uni-spacing-col-base;
    font-size: $uni-font-size-base;
    color: $uni-text-color-grey;
  }
}
</style>
